<template>
	<view class="fault-box">
		<view class="fault-title" @click="product()"> 
			<view>故障产品<span style="color: red;">*</span></view>
			<view style="color: lightgray;">请选择<uni-icons type="right" color="lightgray" size="18"></uni-icons></view>
		</view>
		<view class="fault-tip">在您预约专业人员维修前，可对照下表进行检查：</view>
		<view class="fault-product">
			<view @click="faultGuide" class="fault-product-item" v-for="item in faultForm">{{item.title}}<uni-icons type="right" color="lightgray" size="18"></uni-icons></view>
		</view>
		<fault-guide :showBottom="showBottom" @child-event="isShowBottom"></fault-guide>
	</view>
</template>

<script>
	import faultGuide from '../../../../components/fault-guide/fault-guide.vue';
	
	export default {
		components:{faultGuide},
		data() {
			return {
				showBottom:false,
				faultForm:[
					{
						title:"机器不通电"
					},
					,{
						title:"不制冷"
					},
					{
						title:"不制热"
					}
				]
			}
		},
		methods: {
			product(){
				uni.navigateTo({
					url: "/pages/index/afterSales/serviceProducts/serviceProducts"
				});
			},
			faultGuide(){
				this.showBottom=true;
			},
			isShowBottom(falg){
				this.showBottom=false;
			},
		}
	}
</script>

<style>
	.fault-product-item{
		border-bottom: 1rpx lightgray solid;
		padding:30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.fault-tip{
		width:100%;
		text-align: center;
		color:lightgray;
		padding: 50rpx 0rpx 20rpx 0rpx;
	}
	.fault-box{
		padding-top: 30rpx;
	}
	.fault-title{
		padding:30rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
	}
	.fault-product{
		background-color: white;
	}
</style>
